<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">相关服务</div>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3" id="myScrollspy">
          <ul class="nav nav-tabs nav-stacked center-block" id="myNav">
            <p>特色服务</p>
            <li
              :class="item.id == id ? 'active' : ''"
              v-for="(item, index) in serviceNavList"
              :key="index"
            >
              <a :href="'#' + item.id">{{ item.title }}</a>
            </li>
          </ul>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-9 content  wow zoomIn">
          <div
            class="content-block"
            v-for="(item, index) in serviceContentList"
            :key="index"
          >
            <h2 :id="item.id">
              {{ item.title }}
              <small>/ {{ item.eng_title }}</small>
            </h2>
            <div v-html="item.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "ServiceDetail",
  data() {
    return {
      id: "section-1",
      serviceNavList: [
        {
          id: "section-1",
          title: "车位管理"
        },
        {
          id: "section-2",
          title: "车位引导"
        },
        {
          id: "section-3",
          title: "网站建设"
        },
        {
          id: "section-4",
          title: "小程序定制开发"
        }
      ],
      serviceContentList: [
        {
          id: "section-1",
          title: "车位管理",
          eng_title: "Parking management",
          content:
            "<img src=" +
            require("@/assets/img/fangan1.jpg") +
            ' alt="充电桩1" />'
        },
        {
          id: "section-2",
          title: "车位引导",
          eng_title: "Parking guidance",
          content:
            "<img src=" +
            require("@/assets/img/fangan2.jpg") +
            ' alt="充电桩1" />'
        },
        {
          id: "section-3",
          title: "网站建设",
          eng_title: "Website construction",
          content:
            "<h3>品牌网站</h3><p>品牌网站以品牌营销为目标，搭配多变创新的设计风格，突出展现企业品牌魅力。互诺科技提供的品牌网站建设服务，努力发掘每一品牌的独特记忆点，设定专属的品牌展示角度；并以震撼的视觉冲击力，塑造令人记忆深刻的品牌形象；助力企业扩大品牌知名度，增强品牌效应。</p>"
        },
        {
          id: "section-4",
          title: "小程序定制开发",
          eng_title: "Small program custom development",
          content:
            "<h3>定制开发</h3><p>2年实体企业经营，专注微信小程序定制开发，拥有丰富开发经验和专业的技术团队，确保小程序如期上线，安全高效运营</p>"
        }
      ]
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    var top = document.getElementById(this.id).offsetTop;
    $(window).scrollTop(top + 300);
    $("#myNav").affix({
      offset: {
        top: 300
      }
    });
    var wow = new WOW();
    wow.init();
  }
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
ul.nav-tabs {
  width: 200px;
  margin-top: 40px;
  border-radius: 4px;
  background: #fff;
  z-index: 99999;
  border: 1px solid #474747;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
  text-align: center;
  margin: 0;
  border-top: 1px solid #474747;
}
ul.nav-tabs p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #474747;
  margin: 0;
  padding: 10px 0;
}
ul.nav-tabs li:first-child {
  border-top: none;
}
ul.nav-tabs li a {
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
}
ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
  color: #fff;
  background: #474747;
  border: 1px solid #474747;
}
ul.nav-tabs li:first-child a {
  border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
  border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
  top: 30px;
}
.content-block {
  margin: 50px 0;
}
.content-block > h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
img {
  width: 100%;
}
</style>
